<template>
  <div>
    <!-- 列表页面 -->
    <div class="container" v-if="showType === 'listPage'">
      <div class="header">
        <div class="title">题目列表</div>
        <!-- 分组选择下拉框 -->
        <el-select size="medium" filterable v-model="group_id" placeholder="请选择分类" @change="handleChange($event)" clearable>
          <el-option v-for="(group, index) in groups" :key="index" :label="group.asw_type_name" :value="group.id">
          </el-option>
        </el-select>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" stripe>
        <el-table-column prop="aswtype" label="试卷名称" width="350"></el-table-column>
        <el-table-column prop="aswtitle" label="试题标题" width="520"></el-table-column>
        <el-table-column property="chcktype" width="220" label="试题类型" :formatter="playbackFormat">
        </el-table-column>
        <el-table-column property="sort_id"  width="220" label="试题分类" :formatter="selectTypeName"></el-table-column>
        <el-table-column prop="zip" label="是否上架" width="220">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="170">
          <template #default="scope">
            <el-button v-for="(item, index) in operate" :type="item.type" plain size="mini" :key="index"
              @click.native.prevent.stop="buttonMethods(item.func, scope.$index, scope.row)">{{ item.name }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import asw from '@/model/problem.js'

export default {
  data() {
    return {
      value: true,
      tableData: [],
      operate: [],
      showType: 'listPage',
      groups: [], // 所有分组
      group_id:'',
    }
  },
  async created() {
    this.loading = true
    await this.getAsw()
    this.operate = [{
      name: '编辑',
      func: 'handleEdit',
      type: 'primary'
    },
    {
      name: '删除',
      func: 'handleDelete',
      type: 'danger',
      permission: '删除题目',
    },
    ]
    this.loading = false
  },
  methods: {
    // 操作列
    buttonMethods(func, index, row) {
      const self = this
      const {
        methods
      } = this.$options
      methods[func](self, index, row)
    },
    handleEdit(self, index, row) {
      //self.handleCellEdit(row)
      console.log(index, row)
    },
    handleDelete(self, index, val) {
      console.log(val)
      self
        .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const res = await asw.deleteAsw(val.id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            self.getAsw()
            self.$message({
              type: 'success',
              message: `${res.message}`,
            })
          }
        })
    },
    async getAsw() {
      try {
        const asws = await asw.getAsws()
        this.tableData = asws
        const types = await asw.getAswTypes()
        this.groups = types
      } catch (error) {
        if (error.code === 10020) {
          this.tableData = []
        }
      }
    },
    async getAswByID(ID) {
      try {
        const asws = await asw.getAswsByID(ID)
        this.tableData = asws
        const types = await asw.getAswTypes()
        this.groups = types
      } catch (error) {
        if (error.code === 10020) {
          this.tableData = []
        }
      }
    },

    playbackFormat(row) {
      if (row.chcktype === 1) {
        return '单选题'
      } else if (row.chcktype === 2) {
        return '多选题'
      } else {
        return '简答题'
      }
    },
     selectTypeName(row){
      if(row.sort_id === 11){
        return  '前端试题'
      }else if (row.sort_id === 12) {
        return '后端试题'
      }else if (row.sort_id === 13) {
        return '大数据试题'
      }else if (row.sort_id === 20) {
        return '小程序试题'
      }

    },
    handleChange(event){
      if(event == null || event == ''){
        this.getAsw()
      }else{
      this.getAswByID(event)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 30px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }
  }
</style>
